<template>
	<view style="display: flex; flex-direction: column;">
		<!-- 标题 -->
		<custom-header title="修改昵称"></custom-header>

		<view style="display: flex; align-items: center; width: 100%; padding: 30rpx 70rpx;">
			<input class="nick-input" type="text" placeholder="请输入昵称" v-model="nickName">
			<image style="height: 28rpx; width: 28rpx; margin-left: 20rpx;" src="../../static/images/ic_pop_close.png">
			</image>
		</view>
		
		<text style="margin-top: 20rpx; font-size: 24rpx; color: #4D7EF4; margin-left: 70rpx;">昵称为1-8字符，汉字、数字、字符组成</text>

		<view class="submit-btn" @click="handleSubmit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickName: ''
			};
		},
		methods: {
			async handleSubmit() {
				const res = await this.$http({
					method: 'GET',
					url: '/user/update/nickName',
					data: {
						nickName: this.nickName
					}
				});

				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nick-input {
		flex: 1;
		font-size: 28rpx;
		color: black;
	}

	.submit-btn {
		width: calc(100% - 64rpx);
		margin: 0 32rpx;
		margin-top: 72rpx;
		background-color: #4D7EF4;
		color: white;
		border-radius: 8rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
	}
</style>